<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>情侣APP - 步数记录</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <!-- 健康数据（步数） -->
        <div class="screen">
            <div class="screen-title">步数记录</div>
            <div class="health-screen">
                <div class="steps-comparison">
                    <div class="steps-header">
                        <div class="steps-title">今日步数</div>
                        <div class="steps-date">2023/06/06</div>
                    </div>
                    <div class="steps-bars">
                        <div style="display: flex; flex-direction: column; align-items: center;">
                            <div class="steps-bar" style="height: 70%; position: relative;">
                                <div class="steps-count">8,546</div>
                            </div>
                            <div class="steps-label">我</div>
                        </div>
                        <div style="display: flex; flex-direction: column; align-items: center;">
                            <div class="steps-bar partner" style="height: 60%; position: relative;">
                                <div class="steps-count">7,823</div>
                            </div>
                            <div class="steps-label">TA</div>
                        </div>
                    </div>
                </div>
                
                <!-- 添加详细步数统计 -->
                <div class="steps-stats">
                    <div class="steps-stat-item">
                        <div class="steps-stat-label">日均步数</div>
                        <div class="steps-stat-value">8,245</div>
                        <div class="steps-stat-change positive">+12%</div>
                    </div>
                    <div class="steps-stat-item">
                        <div class="steps-stat-label">本周总步数</div>
                        <div class="steps-stat-value">57,715</div>
                        <div class="steps-stat-change positive">+5%</div>
                    </div>
                    <div class="steps-stat-item">
                        <div class="steps-stat-label">热量消耗</div>
                        <div class="steps-stat-value">345 千卡</div>
                        <div class="steps-stat-change">今日</div>
                    </div>
                </div>
                
                <div class="event-item">
                    <div class="event-title">运动建议</div>
                    <div class="event-desc">每天保持10,000步的运动量有助于保持健康</div>
                    <!-- 添加目标设置 -->
                    <div class="steps-goal-setting">
                        <div class="steps-goal-label">日步数目标</div>
                        <div class="steps-goal-slider">
                            <input type="range" min="5000" max="20000" value="10000" step="1000" id="stepsGoalSlider">
                            <div class="steps-goal-value">10,000步</div>
                        </div>
                    </div>
                </div>
                
                <!-- 添加步数挑战 -->
                <div class="event-item">
                    <div class="event-title">步数挑战</div>
                    <div class="event-desc">向TA发起步数挑战，赢得一次约会主导权！</div>
                    <button class="challenge-btn">发起挑战</button>
                </div>
                
                <div class="bottom-nav">
                    <div class="nav-item" data-page="dashboard.html">
                        <i class="fas fa-home"></i>
                        <span>主页</span>
                    </div>
                    <div class="nav-item" data-page="calendar.html">
                        <i class="fas fa-calendar"></i>
                        <span>日历</span>
                    </div>
                    <div class="nav-item" data-page="capsule.html">
                        <i class="fas fa-clock"></i>
                        <span>时空胶囊</span>
                    </div>
                    <div class="nav-item" data-page="settings.html">
                        <i class="fas fa-cog"></i>
                        <span>设置</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script src="script.js"></script>
    <script>
        // 页面跳转逻辑
        document.querySelectorAll('.nav-item').forEach(item => {
            item.addEventListener('click', function() {
                const page = this.getAttribute('data-page');
                if (page) {
                    window.location.href = page;
                }
            });
        });
        
        // 更新当前日期
        function updateCurrentDate() {
            const dateElement = document.querySelector('.steps-date');
            
            // 获取当前日期
            const now = new Date();
            const year = now.getFullYear();
            const month = (now.getMonth() + 1).toString().padStart(2, '0');
            const day = now.getDate().toString().padStart(2, '0');
            const dateString = `${year}/${month}/${day}`;
            
            // 更新日期显示
            if (dateElement) dateElement.textContent = dateString;
        }
        
        // 页面加载时更新日期
        document.addEventListener('DOMContentLoaded', function() {
            updateCurrentDate();
        });
    </script>
</body>
</html> 